import React, { useState } from 'react'
import { ResultPage, Tabs, Input, Button, Toast } from 'antd-mobile'
import styles from './home.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import {useNavigate} from 'react-router-dom'

function Index() {
  let navigate=useNavigate()

  let [start, setStart] = useState('')
  let [end, setEnd] = useState('')


  const handelSJ = () => {
    let temp = start
    setStart(end)
    setEnd(temp)
  }

  //跳转列表
  const handelList = () => {
    if (start === '' || end === '') {
      Toast.show({
        icon: 'fail',
        content: '请输入出发地或目的地',
        duration:1000
      })
      return
    }
    navigate(`/list?start=${start}&end=${end}`)
  }


  return (
    <div>
      <ResultPage
        status=''
        title='车票系统'
        description='便捷购票，呵护您的每一次出行'
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <Tabs>
            <Tabs.Tab title='火车票' key='fruits'>
              <div className={styles.cp}>
                <Input
                  placeholder='请输入出发地'
                  value={start}
                  onChange={val => {
                    setStart(val)
                  }}
                />
                <LoopOutline fontSize={36} style={{ marginRight: '20px' }} onClick={() => handelSJ()} />
                <Input
                  placeholder='请输入目的地'
                  value={end}
                  onChange={val => {
                    setEnd(val)
                  }}
                />
              </div>
              <div>
                <Button block color='warning' shape='default' onClick={() => handelList()}>
                  查询
                </Button>
              </div>
            </Tabs.Tab>
            <Tabs.Tab title='机票' key='vegetables'>
              机票
            </Tabs.Tab>
            <Tabs.Tab title='直达' key='animals'>
              直达
            </Tabs.Tab>
          </Tabs>
        </ResultPage.Card>
      </ResultPage>
    </div>
  )
}

export default Index
